<!-- 公共集合 -->
<style lang="scss">
.message-itemview {
  padding: 10px 20px;
  padding-top: 0;
  background: #ffffff;
  .itemview-header {
    position: relative;
    font-size: 16px;
    color: #0050a0;
    height: 50px;
    line-height: 50px;
    // padding:10px 0;
    .message-status {
      .item {
        display: inline-block;
        border-radius: 4px;
        line-height: 30px;
        height: 30px;
        padding: 0 20px;
        cursor: pointer;
        &.active {
          background: #0050a0;
          color: #fff;
        }
      }
    }

    .read-all {
      color: #2f6bcf;
      font-size: 14px;
      cursor: pointer;
      position: absolute;
      right: 40px;
      top: 0;
    }

    .close {
      position: absolute;
      right: 10px;
      top: 0;
      font-size: 12px;
      color: #cccccc;
      cursor: pointer;
      &:hover {
        color: #2f6bcf;
      }
    }
  }
  .itemview-body {
    border: 1px solid #e4e7ed;
    position: relative;
    .itemview-bodyright {
      margin-left: 150px;
      .itemview-searchbar {
        padding: 5px 20px;
        background: #f4f7fd;
        color: #333333;
        .search {
          color: #2f6bcf;
          cursor: pointer;
          margin-left: 10px;
        }
        .keyword-input {
          width: 200px;
        }
        .date-input {
          width: 250px;
        }
      }
    }

    .list-item:last-child:after {
      display: none;
    }
    .je-vue-listview {
      padding: 0;
      .listview-body {
        padding: 10px 20px;
      }
      .je-vue-pagebar {
        background: #f4f7fd;
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
      }
    }
  }
}
</style>
<template>
  <div class="message-itemview">
    <!-- 标题 -->
    <div class="itemview-header">
      <div class="message-status">
        <div
          class="item"
          :class="{active:activeStatus==item.code}"
          @click="activeStatus=item.code;"
          v-for="item in status"
          :key="item"
        >
          {{getEn(item.text)}}
          <span v-show="item.code=='WD'">({{unreadCount}})</span>
          <!-- {{getEn(item.text)+title}} -->
        </div>
      </div>
      <span
        class="read-all"
        @click="readAll"
        v-show="activeStatus=='WD'"
      >{{ $t('_message.allread') }}</span>

      <!-- <i class="jeicon jeicon-error close" @click="close"></i> -->
    </div>

    <div class="itemview-body">
      <item-tree
        ref="tree"
        @itemClick="sertchTree"
        :data="menuData"
        :treeExpandData="treeExpandData"
      />
      <div class="itemview-bodyright">
        <div class="itemview-searchbar">
          <div class="searchbox">
            <!-- <slot name="searchType"></slot> -->
            {{ $t('_message.keyword') }}：
            <el-input
              class="keyword-input"
              v-model="_keyword"
              size="mini"
              placeholder
              @keyup.enter.native="load"
              @clear="load"
              clearable
              @input="inputChange($event)"
            ></el-input>
            {{ $t('_message.date') }}：
            <el-date-picker
              class="date-input"
              v-model="time"
              size="mini"
              type="daterange"
              range-separator="——"
              :start-placeholder="$t('_message.begin')"
              :end-placeholder="$t('_message.end')"
              @change="load"
            ></el-date-picker>
            <span class="search" @click="load">{{ $t('_message.search') }}</span>
          </div>
        </div>

        <!-- 列表 -->
        <je-listview
          ref="list"
          v-loading="loading"
          :total-count="totalCount"
          :page-size="10"
          :empty-height="emptyHeight"
          :item-height="itemHeight"
          @buildData="_buildData"
        >
          <!-- 数据项 -->
          <slot name="listitem" slot="listitem" @setUnreadCount="_buildData"></slot>
        </je-listview>
      </div>
    </div>
  </div>
</template>
<script>
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import ListView from '../../components/listview/listview'
import ItemTree from './item_tree.vue'
import spe from '../../assets/lang/message/speNationalList'
import getLang from '../../assets/lang/mergeLang'

const i18n = new VueI18n({
  locale: 'zh_CN', // 语言标识
  messages: {
    zh_CN: getLang('zh', [
      { name: '_message', data: require('./../../assets/lang/message/zh') },
    ]), // 中文语言包
    en: getLang('en', [
      { name: '_message', data: require('./../../assets/lang/message/en') },
    ]), // 英文语言包
  },
})
export default {
  name: 'item-view',
  components: { 'je-listview': ListView, ItemTree },
  props: {
    title: String,
    totalCount: Number,
    loading: Boolean,
    visible: Boolean,
    unreadCount: Number,
    menuData: Array,
    treeExpandData: Array,
  },
  i18n,
  data() {
    return {
      status: [
        { text: '未读', code: 'WD' },
        { text: '已读', code: 'YD' },
        { text: '全部', code: 'ALL' },
      ],
      activeStatus: 'WD',
      unreadCount: 0,
      time: [], //时间区间查询
      keyword: '', //关键字查询
      _keyword: '', //关键字查询
      visible: this.visible,
      title: this.title, //新闻类型
      totalCount: this.totalCount, //总条数，绑定分页条
      loading: this.loading,
      emptyHeight: 180, //空数据的容器高
      itemHeight: 70, //数据项高
      menuData: this.menuData, // 菜单数据
      treeExpandData: this.treeExpandData,
      taskFlCode: '',
    }
  },
  watch: {
    activeStatus(nv) {
      this.load()
    },
  },
  computed: {
    startTime: function () {
      return this.time && this.time[0]
        ? Ext.Date.format(this.time[0], 'Y-m-d')
        : ''
    },
    endTime: function () {
      return this.time && this.time[1]
        ? Ext.Date.format(this.time[1], 'Y-m-d')
        : ''
    },
  },
  mounted() {
    if (Cookies.get('je-local-lang')) {
      this.$i18n.locale = Cookies.get('je-local-lang')
    } else {
      Cookies.set('je-local-lang', this.$i18n.locale)
    }
  },
  methods: {
    inputChange(e) {
      this.$forceUpdate()
    },
    // close: function (visible) {
    //   var parent = this.$parent
    //   parent.setVisible(false)
    //   parent.$emit('doact', 'clearSelect')
    // },
    /**
     * 获得分页信息
     */
    getList: function () {
      return this.$refs.list
    },
    /**
     * 查询参数
     */
    getParams: function () {
      var pageInfo = this.getList().getPageInfo()
      return {
        startTime: this.startTime,
        endTime: this.endTime,
        keyword: this.keyword,
        start: pageInfo.start,
        limit: pageInfo.limit,
        readStatus: this.activeStatus,
      }
    },
    load: function () {
      this.keyword = this._keyword
      this.getList().load()
    },
    /**
     * 加载数据
     */
    _buildData: function () {
      var me = this
      this.$emit('buildData', function (data) {
        me.unreadCount = data.noReadCount
      })
    },
    readAll: function () {
      this.$emit('readAll')
    },
    getEn(cn) {
      if (!cn) return
      if (this.$i18n.locale == 'zh_CN') return cn
      return spe[cn] || cn
    },
    sertchTree(val) {
      // console.log('打印节点', val)
      // this.taskFlCode = val.code
      this.$emit('slectMsgType', val.code)
      this._buildData()
      // if (val.code == 'WF') {
      //   this.taskFlCode = ''
      //   this._buildData()
      // } else {

      //   this._buildData()
      // }
    },
  },
}
</script>


